import { PageContainer } from '@ant-design/pro-components';
import '@umijs/max';
import { Alert, Tabs, TabsProps } from 'antd';
import React from 'react';
import DTU from './Dtu';
import Line from './Line';
import Device from './Device';
import Classification from './Classification';
import Protocol from './Protocol';
import Marquee from 'react-fast-marquee';
// import SqlUpdate from './SqlUpdate';

/**
 * 中心服务器
 *
 * @constructor
 */
const onChange = (key: string) => {
  console.log(key);
};

const items: TabsProps['items'] = [
  {
    key: '1',
    label: 'DTU导入',
    children: <DTU />,
  },
  {
    key: '2',
    label: '线路导入',
    children: <Line />,
  },
  {
    key: '3',
    label: '协议导入',
    children: <Protocol />,
  },
  {
    key: '4',
    label: '能耗分类导入',
    children: <Classification />,
  },
  {
    key: '5',
    label: '设备导入',
    children: <Device />,
  },
];
const CenterPage: React.FC = () => {
  return (
    <PageContainer>
      <Alert
        banner
        message={
          <Marquee pauseOnHover gradient={false}>
            请按照DTU,线路,协议,能耗分类,设备的顺序导入EXCEL文件
          </Marquee>
        }
      />
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    </PageContainer>
  );
};
export default CenterPage;
